<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_1041446_xn0fs7gukqn.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<title>or主页</title>
	</head>
	<script type="text/javascript">
		/*动态改变根元素字体大小*/
		function recalc() {
			var clientWidth = document.documentElement.clientWidth;
			if(!clientWidth) return;
			document.documentElement.style.fontSize = 40 * (clientWidth / 1920) + 'px';
		}

		function initRecalc() {
			recalc();
			var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
			if(!document.addEventListener) return;
			window.addEventListener(resizeEvt, recalc, false);
			document.addEventListener('DOMContentLoaded', recalc, false);
		}
		initRecalc();
	</script>
	<script type="text/javascript">
		window.onload = function() {
			window.document.getElementById('input').focus();
			window.document.onclick = function() {
				window.document.getElementById('input').focus();
			}
		}
	</script>

	<body>
		<!--主页内容-->
		<div id="web" class="web">
			<div class="nav">
				<div class="nav_btn">
					<a href="javascript:void(0)" onclick="document.getElementById('menu').style.display='block';document.getElementById('web').style.display='none';"><i class="iconfont icon-caidan">
					</i></a>
				</div>
				<div class="img">
					<a href="index.html"><img src="img/indexlogo.jpg" alt="" /></a>
				</div>
				<div class="nav_search">
					<a href="javascript:void(0)" onclick="document.getElementById('search').style.display='block';document.getElementById('web').style.display='none';"><i class="iconfont icon-sousuo">
					</i></a>
				</div>
			</div>
			<div class="main">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="img/indexbanner.jpg" alt="" />
							<div class="box">
								<p class="title">Dot. Chair</p>
								<div class="link">
									<a href="#">SEE MORE</a>
								</div>
							</div>
						</div>
						<div class="swiper-slide">
							<img src="img/indexbanner.jpg" alt="" />
							<div class="box">
								<p class="title">Dot. Chair</p>
								<div class="link">
									<a href="#">SEE MORE</a>
								</div>
							</div>
						</div>
						<div class="swiper-slide">
							<img src="img/indexbanner.jpg" alt="" />
							<div class="box">
								<p class="title">Dot. Chair</p>
								<div class="link">
									<a href="#">SEE MORE</a>
								</div>
							</div>
						</div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
				<!--关于-->
				<div class="about">
					<div class="title">About Or</div>
					<div class="img">
						<img src="img/aboutOr.jpg" alt="" />
						<div class="box">
								<div class="link">
									<a href="#">SEE MORE</a>
								</div>
							</div>
					</div>
				</div>
				<!--产品-->
				<div class="product">
					<div class="title">
						Product
					</div>
					<div class="content">
						<div class="multi">
							<div class="img">
								<img src="img/product1.jpg" alt="" />
							</div>
							<p class="mintitle">
								<a href="#">Dot. Multi-functional</a>
							</p>
							<p class="maxtitle">
								<a href="#">Dot. Multi-functional 	Combine-unit</a>
							</p>
						</div>
						<div class="free">
							<div class="img">
								<img src="img/product2.jpg" alt="" />
							</div>
							<p class="mintitle">
								<a href="#">free collection</a>
							</p>
							<p class="maxtitle">
								<a href="#">Dot. Table</a>
							</p>
						</div>
					</div>
					<div class="content2">
						<div class="free">
							<div class="img">
								<img src="img/product3.jpg" alt="" />
							</div>
							<p class="mintitle">
								<a href="#">free collection</a>
							</p>
							<p class="maxtitle">
								<a href="#">Dot. Table</a>
							</p>
						</div>
						<div class="multi">
							<div class="img">
								<img src="img/product4.jpg" alt="" />
							</div>
							<p class="mintitle">
								<a href="#">free collection</a>
							</p>
							<p class="maxtitle">
								<a href="#">Dot. Table</a>
							</p>
						</div>
					</div>
					<div class="video">
						<div class="mintitle">
							<a href="#">Product of the day</a>
						</div>
						<div class="maxtitle">
							<a href="#">Dot. Multi-functional Combine-unit</a>
						</div>
						<div class="videobox">
							<video controls="controls" poster="img/videobg.jpg">
								<source src="myvideo.mp4" type="video/mp4"></source>
								<source src="myvideo.ogv" type="video/ogg"></source>
								<source src="myvideo.webm" type="video/webm"></source>
								<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
									<param name="movie" value="myvideo.swf" />
									<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
								</object>
								当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
							</video>
						</div>
						<div class="more">
							<a href="#">SEE MORE VIDEO</a>
						</div>
					</div>
				</div>
				<div class="footer">
					<div class="bg">
						<img src="img/footerbg.jpg" alt="" />
					</div>
					<p class="title"><a href="#">Space Inspiration</a></p>
					<div class="bottom">
						<div class="box">
							<p class="reg">
								<a href="#">Copyright (c) Nissin Furniture Crafters Co ,Ltd All Rights Reserved</a>
							</p>
							<div class="top">
								<a href="#"><i class="iconfont icon-shang"></i></a>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<!--菜单-->
		<div id="menu" class="menu">
			<div class="nav">
				<div id="close" class="close">
					<a href="javascript:void(0)" onclick="document.getElementById('menu').style.display='none';document.getElementById('web').style.display='block'"><i class="iconfont icon-close1"></i></a>
				</div>
				<div class="logo">
					<i class="iconfont icon-weibo">
					</i>
					<i class="iconfont icon-weixin">
					</i>
					<i class="iconfont icon-icon_baidulogo">
					</i>
					<i class="iconfont icon-xiangji">
					</i>
				</div>
			</div>
			<div class="list">
				<ul>
					<li>
						<a href="#">About Or</a>
					</li>
					<li>
						<a href="#">Product</a>
					</li>
					<li>
						<a href="#">Space Inspiration</a>
					</li>
					<li>
						<a href="#">User Experience</a>
					</li>
				</ul>
			</div>
			<div class="other">
				<span class="line"></span>
				<span class="txt"><a href="#">NEWS</a></span>
				<span class="line"></span>
				<span class="txt"><a href="#">EVENT</a></span>
				<span class="line"></span>
				<span class="txt"><a href="#">CONTACT</a></span>
				<span class="line"></span>
			</div>
		</div>
		<!--搜索-->
		<div id="search" class="search">
			<div class="return">
				<a href="javascript:void(0)" onclick="document.getElementById('search').style.display='none';document.getElementById('web').style.display='block'"><i class="iconfont icon-weibiaoti39"></i> Return</a>
			</div>
			<form>
				<div class="input">
					<input id="input" type="text" name="search" id="search" value="" />
				</div>
				<p class="enter">
					Searh anything &amp; hit enter
				</p>
			</form>
		</div>
		<script src="js/swiper.min.js">
		</script>
		 <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
    });
  </script>
	</body>

</html>